
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://" + request.getServerName()
				+ ":" + request.getServerPort() + path + "/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<% String authed = (String)session.getAttribute("auth");
	if (!"yes".equals(authed)) {%>
<jsp:forward page="noAuth.jsp" />				          
<%} %>
<title>main</title>
<LINK href="./css/style.css" type=text/css rel=stylesheet>
<script src="./js/WebCalendar.js" type="text/javascript"></script>
<script src="./js/main.js" type="text/javascript"></script>
<script src="./js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="./js/jquery.validate.min.js" type="text/javascript"></script>
<script src="./js/validate.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #5CB7FE;
}
.STYLE1 {font-size: 12px; font-family: arial}
.subscript {font-size: 6px; font-family: arial}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
.STYLE5 {font-size: 12px; color: #FF0000; }
.STYLE6 {
	font-size: 16px;
	font-weight: bold;
}
-->
 </style>
</head>
<script type="text/javascript">
var mydata;
var firstCity;
var currentCity;
function showProvinceCityInfo() {
	$("#province").html("<tr><td class=\"STYLE1\">正在加载数据...</td><tr>");
	//$("#city").html("<tr><td class=\"STYLE1\">正在加载数据...</td><tr>");
	$.ajax({  
	    url:'cityInfo.action?t='+Math.random(),  
	    type:'GET',  
	    data:"{}",  
	    dataType:'json',
	    success:function (data) {
	         var i=0;
	         var tr;
	         $(".provinceData").data("provinceData",data);
	         $("#province").html("");
	         $.each(data.cityList,function(province, citys){
	            if(i%12 == 0) {
	                tr=$("<tr></tr>");
	                tr.appendTo("#province");
	            }
	            $("<td><input type='checkbox' name='provinces' value='"+province+"' onclick='selectProvince()'/>&nbsp;"+province + "</td>").appendTo(tr);
	            i++;
	         });
	    }  
	});
}

function showFirstCityOfProvince(provinceName) {
    var j=0;
    var tr;
    $("#city").html("");
	var data = $(".provinceData").data("provinceData");
	$.each(data.cityList,function(province, citys) {
	    if (province == provinceName) {
	        var action = 'allEnvData.action?t='+Math.random();
	    	$(citys).each(function (j, city) {
	    	  if(j == 0) {
	    	       $("#sdate").val("");
	    	       $("#edate").val("");
	    	  	   showEnvData(action, city);
	    	  }
		      if(j%12 == 0) {
	                tr=$("<tr></tr>");
	                tr.appendTo("#city");
	            }
	            $("<td><a href='javascript:void(0)' onclick='showEnvData(\"" + action + "\",\"" + city + "\")'>"+city + "</a></td>").appendTo(tr);
	            j++;
	    	});
	     return;
	    }
	});
}

function selectProvince(){
    var provinceArray = new Array();
    var cityArray = new Array();
    
	$("input[name='provinces']:checked").each(function(){
        provinceArray.push($(this).val());
    });

	$('#city').html("<tr><td class=\"STYLE1\"></td><tr>");
	$('#cityText').html("");
	$('#position').html("");
	if (provinceArray.length == 0) {
	    return;
	}
	
	var tr;
	var data = $(".provinceData").data("provinceData");
	$.each(data.cityList,function(province, citys) {
	    if ($.inArray(province, provinceArray) > -1) {
	    	$(citys).each(function (j, city) {
		        cityArray.push(city);
	    	});
	    }
	});
	$.each(cityArray, function(key, city){ 
   		if(key%12 == 0) {
            tr=$("<tr></tr>");
            tr.appendTo("#city");
        }
        $("<td><input type='checkbox' name='cities' value='" + city + "' checked/>" + city + "</td>").appendTo(tr);
   	});
   	
   	//$("<td><input type='button' id='selectCityBt' class='btn1_mouseout' onMouseOver=\"this.className='btn1_mouseover'\" onMouseOut=\"this.className='btn1_mouseout'\" onclick=\"selectCity()\" value=\" 确定\"></td>").appendTo(tr);
}

function selectCity(){
    var cityArray = new Array();
	$("input[name='cities']:checked").each(function(){
        cityArray.push($(this).val());
    });
	$("#sdate").val("");
	$("#edate").val(""); 
	$("#exporting").html("");
	var action = 'allEnvData.action?t='+Math.random();
	showEnvData(action, cityArray,  startDate, endDate);
}

function showEnvData(action, city, currentPage, pageSize, startDate, endDate) {
    var mydata = {};  
    if (city instanceof Array) {
    	city =  city.join(",");
    }
    currentCity = city;
    $("#cityText").html("[ <span id='selectedCities'>" + city + "</span> ] ");
	mydata["city"] = city;
	mydata["currentPage"] = currentPage;
	mydata["pageSize"] = pageSize;
	mydata["startDate"] = startDate;
	mydata["endDate"] = endDate;
	$("#position").html("<tr></td>正在加载站点数据...</tr></td>");
	$.ajax({
	    url:action,
	    type:'POST',  
	    data:mydata,  
	    dataType:'json',
	    success:function (data) {
	         var pageBar="";
	         $("#position").html("");
	         $.each(data.allDataMap,function(key, value){
	         	if (key == "pageBar") {
					pageBar = value;
	         	}
	         	
	         	if (key == "envData") {
	         	    var tr=$("<tr style='font-weight:bold'></tr>");
	                tr.appendTo("#position");
	                $("<td width=\"10%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">省份</td>").appendTo(tr);
	                $("<td width=\"10%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">城市</td>").appendTo(tr);
	                $("<td width=\"10%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">站点</td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">SO<span style=\"font-size: 8px;\">2</span></td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">NO<span style=\"font-size: 8px;\">2</span></td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">CO</td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">O<span style=\"font-size: 8px;\">3</span></td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">O<span style=\"font-size: 8px;\">3</span>-8h</td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">O<span style=\"font-size: 8px;\">3</span>-24h</td>").appendTo(tr);
	                $("<td width=\"8%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">O<span style=\"font-size: 8px;\">3</span>-8h-24h</td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">PM<span style=\"font-size: 8px;\">2.5</span></td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">PM<span style=\"font-size: 8px;\">10</span></td>").appendTo(tr);
	                $("<td width=\"18%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">更新时间</td>").appendTo(tr);
	                $(value).each(function (j, site) {
		                var tr=$("<tr></tr>");
		                tr.appendTo("#position");
		                $("<td width=\"10%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+site.province+"</td>").appendTo(tr);
		                $("<td width=\"10%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+site.area+"</td>").appendTo(tr);
	                	$("<td width=\"10%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+site.position_name+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.SO2==-999?"-":site.SO2)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.NO2==-999?"-":site.NO2)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.CO==-999?"-":site.CO)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.o3==-999?"-":site.o3)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.o3_8H==-999?"-":site.o3_8H)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.o3_24H==-999?"-":site.o3_24H)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.o3_8H_24H==-999?"-":site.o3_8H_24H)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.PM25==-999?"-":site.PM25)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.PM10==-999?"-":site.PM10)+"</td>").appendTo(tr);
		                $("<td width=\"18%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+site.timePoint+"</td>").appendTo(tr);
	                });
	         	}
	         });
	         var tr=$("<tr></tr>");
	         if (pageBar == "") {
	         	pageBar = "没有数据";
	         }
             tr.appendTo("#position");
             $("<td height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\" colspan='13'>"+pageBar+"</td>").appendTo(tr);
	    }  
	});
}

function getDataExportProgress() {
	$.ajax({
	    url:"checkDataExportProgress.action?t="+Math.random(),
	    type:'GET',  
	    data:"{}",
	    dataType:'json',
	    success:function (data) {
	    	$("#percentage").html(data.dataExportProgress+"%");
	   		if (data.dataExportProgress == 1.0) {
	   			$("#percentage").html("100%");
	    		$("#exporting").html("导出成功！");
	    		$("#exportDataBt").show();
	    		return;
	    	} else {
	    		getDataExportProgress();
	    	}
    }});
}

$(document).ready(function() {
	showProvinceCityInfo();
	$("#selectDateBt").click(function(){
	    var startDate;
	    var endDate;
	    if ($("#sdate").val() == "" && $("#edate").val() != "") {
	    	alert('请选择开始日期!');
	    	return false;
	    }
	    if ($("#sdate").val() != "" && $("#edate").val() == "") {
	    	alert('请选择结束日期!');
	    	return false;
	    }
	    if ($("#sdate").val() != "" && $("#edate").val() != "") {
	    	startDate = $("#sdate").val() + " 00:00:00";
	    	endDate = $("#edate").val()+ " 23:00:00";
	    }
	    
	    $("#exporting").html("");
	    var cityArray = new Array();
		$("input[name='cities']:checked").each(function(){
	        cityArray.push($(this).val());
	    });
		showEnvData('allEnvData.action?t='+Math.random(), cityArray, 1, 10, startDate, endDate);
	});
	$("#exportDataBt").click(function(){
	    startDate = ($("#sdate").val() == "" ? "" : $("#sdate").val() + " 00:00:00");
	    endDate = ($("#edate").val() == "" ? "" : $("#edate").val()+ " 23:00:00");
	    window.location.href="exportEnvData.action?startDate="+startDate+"&endDate="+endDate+"&city="+encodeURI(encodeURI($("#selectedCities")[0].innerHTML));
	    $("#exportDataBt").hide();
	    $("#exporting").html("正在导出数据... <span id='percentage'></span>");
	    $("#exporting").show();
	    
	    //var dataExportFinished = false;
	    //while (!dataExportFinished) {
	    //	$.ajax({
		//    url:"checkDataExportProgress.action?t="+Math.random(),
		//    type:'POST',  
		///    data:mydata,  
		//    dataType:'json',
		//    success:function (data) {
		//    	$("#percentage").html(data.dataExportProgress+"%");
		 //   	if (data.dataExportProgress == 100) {
		//    		dataExportFinished = true;
		//    		$("#exporting").html("导出成功！");
		//    	} else {
		//    		$.delay(3000);
		//    	}
		//    }});
	    //}
	    getDataExportProgress();
	    
	});
	$("#selectAllProvinces").click(function(){
		if (this.checked) {
			$("input[name='provinces']").each(function(){
            	$(this).attr("checked",true);
   			});
   			$("#selectAllCities").attr("checked",true);		
		} else {
			$("input[name='provinces']").each(function(){
            	$(this).attr("checked",false);
   			});
   			$("#selectAllCities").attr("checked",false);
		}
		selectProvince();
		
	});
	$("#selectAllCities").click(function(){
		if (this.checked) {
			$("input[name='cities']").each(function(){
            	$(this).attr("checked",true);
   			});		
		} else {
			$("input[name='cities']").each(function(){
            	$(this).attr("checked",false);
   			});
		}
	});
});
</script>
<body style="overflow-x:hidden">
<table width="100%" height="568" border="0" cellpadding="0"
	cellspacing="0" bordercolor="#D8EDFF">
	<!--DWLayoutTable-->
	<tr>
		<td height="8" colspan="4" valign="top"></td>
		<td width="98%" valign="top"></td>
		<td width="5" valign="top"></td>
	</tr>
	<tr>
		<td height="5" colspan="3" align="right" valign="top"><img
			src="images/icon1.jpg" width="6" height="5" /></td>
		<td colspan="2" valign="top"><img src="images/icon2.jpg" width="100%"
			height="5" /></td>
		<td valign="top"><img src="images/icon3.jpg" width="5" height="5" /></td>
	</tr>
	<tr>
		<td width="7" height="523">&nbsp;</td>
		<td width="5" align="right" valign="top" background="images/icon5.jpg"><img
			src="images/icon5.jpg" width="5" height="5" /></td>
		<td colspan="2" valign="top" bgcolor="#D8EDFF">&nbsp;</td>
		<td valign="top" background="images/main_bg.png">
		
		<table width="100%" border="0" cellpadding="0" cellspacing="0"
			bgcolor="#D8EDFF">
			<!--DWLayoutTable-->
			<tr>
				<td height="30" colspan="3" valign="middle"><span class="STYLE1">&nbsp;[全部数据]</span></td>
				<td width="29">&nbsp;</td>
			</tr>
			<tr>
				<td width="90" height="60">&nbsp;</td>
				<td width="98%" valign="top">
				    <table width="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#D8EDFF">
						<!--DWLayoutTable-->
						<tr>
							<td height="59" colspan="3" align="left" valign="middle" class="STYLE6">
							<fieldset>
			   				 <legend><img alt="省份信息" src="images/search.png"/> &nbsp;&nbsp;<span class="STYLE1">省份信息 &nbsp; <input type='checkbox' name='selectAllProvinces' id='selectAllProvinces'/> 全选</span></legend>
								<table width="800" id="province" class="STYLE1 provinceData">
							  </table>
					  	     </fieldset>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="20" colspan="3" align="center" valign="middle" class="STYLE6"></td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="59" colspan="3" align="left" valign="middle" class="STYLE6">
							<fieldset>
			   				 <legend><img alt="城市信息" src="images/search.png"/> &nbsp;&nbsp;<span class="STYLE1">城市信息 &nbsp; <input type='checkbox' name='selectAllCities' id='selectAllCities'/> 全选</span></legend>
								<table width="800" id="city" class="STYLE1">
							  </table>
					  	     </fieldset>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="40" colspan="4" valign="middle" class="STYLE1">
						    <span id="cityText"></span>所有的数据(单位:μg/m³; CO为mg/m³) 
							</td>
						</tr>
						<tr>
							<td height="40" colspan="4" valign="middle" class="STYLE1">
							    <fieldset>
			   				 		<legend><img alt="省份信息" src="images/search.png"/> &nbsp;&nbsp;<span class="STYLE1">条件过滤</span></legend>
									开始日期: 
									<input name="slogDate" type="text" id="sdate" onclick="new Calendar().show(this);" size="10" maxlength="10" style="width:80px; height:18px;" readonly="readonly"/>
									<!--  <input name="slogDate" id="sdate" for="sdate" type="text" onDblClick="setday(this, 'slogDate')" dataType="Date" format="ymd" size="16" maxlength="20" style="width:80px; height:18px;" onClick="setday(this,'slogDate')">-->
									&nbsp;&nbsp;结束日期: 
									<input name="elogDate" type="text" id="edate" onclick="new Calendar().show(this);" size="10" maxlength="10" style="width:80px; height:18px;" readonly="readonly"/>
									<!-- <input name="elogDate" id="edate" for="edate" type="text" onDblClick="setday(this,'elogDate')" dataType="Date" format="ymd" size="16" maxlength="20" style="width:80px; height:18px;" onClick="setday(this,'elogDate')"> -->
									&nbsp;&nbsp;<input name="Submit2" type="submit" id="selectDateBt" class="btn1_mouseout" onMouseOver="this.className='btn1_mouseover'" onMouseOut="this.className='btn1_mouseout'" value=" 确定">
									&nbsp;&nbsp;<input name="exportDataBt" type="button" id="exportDataBt" class="btn1_mouseout" onMouseOver="this.className='btn1_mouseover'" onMouseOut="this.className='btn1_mouseout'" value=" 导出数据　">
									<span id="exporting" style="display:none"></span>
								</fieldset>
							</td>
						</tr>
						<tr>
							<td colspan="4" height="10px"></td>
						</tr>
						<tr>
							<td colspan="3" align="left" valign="top" class="STYLE1">
								<table width="860" id="position" border=0 cellpadding=0 cellspacing=1
					bgcolor=5cb7fe class="STYLE1">
					          
							  </table>
							<td>&nbsp;</td>
						</tr>
					</table>
				</td>
				<td width="50">&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
</table>
		</td>
		<td valign="top" background="images/icon6.jpg"><img
			src="images/icon6.jpg" width="5" height="100" /></td>
	</tr>

	<tr>
		<td height="5"></td>
		<td valign="top"><img src="images/icon7.jpg" width="5" height="5" /></td>
		<td colspan="3" valign="top"><img src="images/icon8.jpg" width="100%"
			height="5" /></td>
		<td valign="top"><img src="images/icon9.jpg" width="5" height="5" /></td>
	</tr>
	<tr>
		<td height="2"></td>
		<td></td>
		<td width="1"></td>
		<td width="6"></td>
		<td></td>
		<td></td>
	</tr>
</table>
</body>
</html>
